<!-- /snippets/product-grid-item.liquid -->
{% comment %}

  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.

  A liquid variable (grid_item_width) is set just before the this
  snippet is included to change the size of the container.
  Once the variable is set on a page, all future instances of this
  snippet will use that width. Overwrite the variable to adjust this.

  Example
    - assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% comment %}
  Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% comment %}
  Set the default within collection filter if not set
{% endcomment %}
{% unless current_collection == blank %}
  {% assign current_collection = collection %}
{% endunless %}

{% comment %}
  Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% comment %}
  Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

{% comment %}
  Set a class for sold-out and on-sale items
{% endcomment %}
<div class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

  {% comment %}
    Link to your product with the 'within: collection' filter for the link to be aware of the collection.
    This allows you to create collection-based navigation on the product page.

    Results of using 'within: collection':
    - Instead of a URL with /products/product-handle
      you would get /collections/collection-handle/products/product-handle

    For more info on navigation within a collection
      - http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection

  {% endcomment %}
  <a href="{{ product.url | within: collection }}" class="grid__image">
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
  </a>

  <p class="h6">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </p>
  <p>
    {% comment %}
      You can show a leading 'from' or 'up to' by checking 'product.price_varies'
      if your variants have different prices.
    {% endcomment %}
    {% if product.price_varies %}{{ 'products.general.from' | t }}{% endif %}
    {{ product.price | money }}
    {% if sold_out %}
      <br><strong>{{ 'products.product.sold_out' | t }}</strong>
    {% endif %}
    {% if on_sale %}
      {% assign sale_price =  product.compare_at_price | money %}
      <br>{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% endif %}
  </p>

</div>
